<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 新生报到
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form
            :inline="true"
            :model="query"
            class="demo-form-inline"

        >
          <el-form-item label="专业">
            <el-select
                v-model="query.majorId"
                filterable
                placeholder="请选择专业"
                @focus="getMajor()"
            >
              <el-option
                  v-for="item in optionsMajors"
                  :key="item.sid"
                  :label="item.majorName"
                  :value="item.sid"
                  :disabled="item.adviserId== ItemSid? false:true"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select
                v-model="query.classId"
                filterable
                placeholder="请选择班级"
                @focus="getClassList()"
                style="width: 80%"
            >
              <el-option
                  v-for="item in classList"
                  :key="item.sid"
                  :label="item.className"
                  :value="item.sid"
                  :disabled="item.adviserId== ItemSid? false:true"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <div class="block">
              <el-date-picker
                  v-model="query.startTime"
                  type="date"
                  placeholder="选择实际报到开始日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="结束时间">
            <div class="block">
              <el-date-picker
                  v-model="query.endTime"
                  type="date"
                  placeholder="选择结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="学号">
            <el-input
                v-model="query.studentId"
                placeholder="学号"
                class="inline-input"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-search"
              @click="handleSearch"
              >搜索</el-button
            >
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-button-->
          <!--              type="primary"-->
          <!--              icon="el-icon-circle-plus-outline"-->
          <!--              @click="handleAdd"-->
          <!--              >新增</el-button-->
          <!--            >-->
          <!--          </el-form-item>-->
        </el-form>
        <div class="paddy">
          <el-button type="primary" plain @click="checkStates()"
          >已预约
          </el-button
          >
          <el-button type="primary" plain @click="checkStatesTwo()"
          >已报到
          </el-button
          >
          <el-button type="primary" plain @click="checkStatesThree()"
          >未报到
          </el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
        @row-click="clickRow"
      >
        <el-table-column type="selection" />
        <el-table-column
          :show-overflow-tooltip="true"
          :prop="item.prop"
          :label="item.label"
          v-for="item in props"
          :key="item.prop"
          align="center"
        >
        </el-table-column>
        <el-table-column label="报到状态" align="center">
          <template #default="scope" style="width:750px">
            <el-popover effect="light" trigger="hover" placement="top" width="500px">
              <template #default>
                <p>姓名: {{ scope.row.studentName }}</p>
                <p>专业: {{ scope.row.majorName }}</p>
                <el-steps :active="scope.row.status" align-center finish-status="success">
                  <!--                  <el-step :space="2"-->
                  <!--                    title="驳回"-->
                  <!--                    description="当天报到人数过多或者时间问题被驳回"-->
                  <!--                    v-if="isShow"-->
                  <!--                  ></el-step>-->
                  <!--                  <el-step-->
                  <!--                    title="待审核"-->
                  <!--                    description="待审核"-->
                  <!--                  ></el-step>-->
                  <el-step
                      title="已预约"
                      description="已预约待报到"
                  ></el-step>
                  <el-step
                      title="报到"
                      description="已经报到"
                  ></el-step>
                </el-steps>
              </template>
           
              <template #reference>
                <div class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.statuses }}</el-tag>
                </div>
              </template>
            </el-popover>
          </template>
          
        </el-table-column>
        <el-table-column>
          <el-table-column
            label="操作"
            width="180"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <!--              <el-button-->
              <!--                type="text"-->
              <!--                icon="el-icon-edit"-->
              <!--                @click="handleEdit(scope.$index, scope.row.sid)"-->
              <!--                >同意-->
              <!--              </el-button>-->
              <!--              <el-button-->
              <!--                type="text"-->
              <!--                icon="el-icon-delete"-->
              <!--                class="red"-->
              <!--                @click="handleDelete(scope.$index, scope.row.sid)"-->
              <!--                >驳回</el-button-->
              <!--              >-->
              <el-button type="text" @click="handleOther(scope.row)"
                         :disabled="scope.row.status==3?true:false">报到
              </el-button
              >
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :currentPage="query.pageNum"
          :page-sizes="[10, 20, 40]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import request from "../../utils/request";

export default {
  name: "reserve",
  methods: {
    // clickRow(row) {
    //   this.$refs.multipleTable.toggleRowSelection(row);
    // },
  },
  setup() {
    const ItemSid = localStorage.getItem("sid")
    const router = useRouter();
    const props = [
      {label: "学生姓名", prop: "studentName"},
      {label: "所属专业", prop: "majorName"},
      {label: "所属班级", prop: "className"},
      {label: "学号", prop: "studentId"},
      {label: "乘车方式", prop: "traffic"},
      {label: "到站地点", prop: "address"},
      {label: "车次", prop: "trainNumber"},
      {label: "实际到校时间", prop: "realTime"},
      {label: "预约报到时间", prop: "reserveTime"},


      // { label: "当前报到状态", prop: "status" },
    ];

    const query = reactive({
      majorId: "",
      classId: "",
      studentId: "",
      startTime: "",
      endTime: "",
      status: "",
      adviserId: "",
      pageNum: 1,
      pageSize: 10,
    });
    const tableData = ref([]);
    const pageTotal = ref(0);
     const isShow = ref(false);
    // 获取表格数据
    const getData = () => {
      query.adviserId = localStorage.getItem("sid")
      request
          .get("/reserve/queryReserveVo", {
            params: query,
          })
          .then((res) => {
            if (res.code != "0") {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              tableData.value = res.data.records;
            for (var i = 0; i < tableData.value.length; i++) {
              if (tableData.value[i].status == 0) {
                tableData.value[i].statuses = "驳回";
                isShow.value=true
              } else if (tableData.value[i].status == 1) {
                tableData.value[i].statuses = "待报到";
              } else if (tableData.value[i].status == 2) {
                tableData.value[i].statuses = "已审核";
              } else if (tableData.value[i].status == 3) {
                tableData.value[i].statuses = "已报到";
              }
            }
          
            pageTotal.value = res.data.total;
            query.majorId = "";
            query.studentName = "";
            query.status = "";
          }
        });
    };
    getData();
    //学院下拉框
    // const options = ref([]);
    // const getAllCollege = () => {
    //   console.log(query.collegeId);
    //   request.get("/college/getAllCollege").then((res) => {
    //     options.value = res.data;
    //     getMajor;
    //   });
    // };
    //专业下拉框

    const optionsMajors = ref([]);
    const getMajor = () => {
      request
          .get("/major/queryList", {
            params: {collegeId: query.collegeId, type: 1},
          })
          .then((res) => {
            optionsMajors.value = res.data;
          });
    };
    //班级下拉框
    const classList = ref([]);
    const getClassList = () => {
      request
          .get("/class/byMajorIdOrCollegeId", {
            params: {majorId: query.majorId},
          })
          .then((res) => {
            classList.value = res.data;
          });
    };
    // 查询操作
    const handleSearch = () => {
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };
    //多选
    const tableSelection = reactive({
      ids: [],
      reserveType: "",
    });
    //选择列表框
    const handleSelectionChange = (val) => {
      tableSelection.ids = [];
      for (var i in val) {
        tableSelection.ids.push(val[i].sid);
      }
    };
    // 新增操作
    const handleAdd = () => {
      router.push("/admin/addNew");
    };
    //同意
    const handleEdit = (sid) => {
      tableSelection.reserveType = 2;
      updateReserve();
    };
    //更多 报到
    const handleOther = (row) => {
      tableSelection.reserveType = 3;
      updateReserve();
      // router.push({ path: "/admin/addNew", query: { id: row.sid } });
    };
    //驳回
    const handleDelete = (sid) => {
      tableSelection.reserveType = 0;
      updateReserve();
    };
    //  const importVisible = ref(false);
    const checkStates = () => {
      // query.status = 1;
      getData();
    };

    const checkStatesTwo = () => {
      query.status = 3;
      getData();
    };
    const checkStatesThree = () => {
      router.push("/admin/failCheck");
      // query.status = "";
      // getData();
    };
    const updateReserve = () => {
      if (tableSelection.reserveType == null) {
        ElMessage.info("请选择执行操作类型");
        return;
      }
      if (tableSelection.ids.length === 0) {
        ElMessage.info("请选择学生");
        return;
      }
      ElMessageBox.confirm("确定操作吗？", "提示", {
        type: "warning",
      }).then(() => {
        request.post("/reserve/auditBatch", tableSelection).then((res) => {
          if (res.code === null) {
            ElMessage.success("报到成功");
            getData();
            tableSelection.reserveType = "";
          } else {
            ElMessage.error(res.msg);
            tableSelection.reserveType = "";
          }
        });
      });
    };
    return {
      props,
      query,
      tableData,
      pageTotal,
      optionsMajors,
      tableSelection,
      isShow, classList,
      ItemSid, getClassList,
      handleSelectionChange,
      handleDelete,
      handleOther,
      getMajor,
      checkStates,
      checkStatesTwo,
      checkStatesThree,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      handleAdd,
      updateReserve,
      handleEdit,
    };
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.exportStudent {
  display: inline-flex;
}
.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.paddy {
  display: flex;
  padding-top: 20px;
}
</style>
